<template>
  <div class="crayon-clock">
    <div class="crayon-clock-time">{{ date + ' ' + week + ' ' + time }}</div>
    <div class="crayon-clock-date">
      <span class="date">{{  }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";

const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const time = ref('')
const date = ref('')
const week = ref('')

function getCurrentTime(){
  time.value = dayjs().format("HH:mm:ss");
  date.value = dayjs().format("YYYY-MM-DD");
  week.value = weekday[dayjs().day()];
}
const timeFn = () => {
    setInterval(() => {
      getCurrentTime()
    }, 1000);
}

onMounted(()=>{
  getCurrentTime()
  timeFn()
})
</script>


<style scoped lang="scss">
.crayon-clock {
  font-family:  -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif;
  text-align: center;
  /*position: absolute;
  right: 55px;
  top: 20px;*/
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
.crayon-clock-time {
  letter-spacing: 0.05em;
  font-size: 20px;
  //padding: 5px 0 0 0;
  user-select: none;
}
.crayon-clock-date {
  letter-spacing: 0.1em;
  font-size: 15px;
}
</style>